import {
    MenuPermissionType,
    getParentMenu,
    menuAdd,
    menuEdit,
    menuType,
    permissionCreate,
    permissionEdit
} from '@/apis/system/menu'
import { reactive } from 'vue'
import { routerStore } from '@/store/router.store'
import * as Icons from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default class EditMenuData {
    //定义菜单字段
    information: any = reactive({
        menuName: '', //
        menuType: '',
        icon: '',
        name: '',
        sort: 1,
        routerPath: '',
        component: '',
        permission: '',
        status: '1',
        visible: true,
        keepAlive: '',
        id: '',
        api: '',
        parentId: ''
    })

    //上级目录
    menuSimpleData: any[] = []

    //icon输入框值
    iconInput = ''

    //验证规则
    rules: any = {
        menuName: { required: false, message: '请选择上级菜单', trigger: 'change' },
        menuType: { required: true, message: '请选择菜单类型', trigger: 'change' },
        name: { required: true, message: '请输入菜单名称', trigger: 'blur' },
        routerPath: { required: true, message: '请输入路由地址', trigger: 'blur' },
        status: { required: true, message: '请选择菜单状态', trigger: 'change' },
        component: { required: true, message: '请输入组件路径', trigger: 'blur' },
        permission: { required: true, message: '请输入权限字符', trigger: 'blur' },
        api: { required: true, message: '请输入api接口', trigger: 'blur' }
    }

    //父级菜单下拉列表数据
    parentOptions: any[] = reactive([])

    /**
     * icon 数据
     */
    iconList: string[] = reactive([])

    /**
     * 默认 icon 数据
     */
    iconDefault: string[] = reactive([])

    /**
     * 定义弹窗数据变量
     */
    dialog = reactive({
        visible: false,
        title: '添加菜单',
        type: 'add',
        width: '700px',
        menuType: 1,
        id: ''
    })
    _routerStore = routerStore()
    //默认菜单
    defaultMenu: any[] = reactive([])

    constructor() {
        Object.keys(Icons).forEach((key: string) => {
            this.iconList.push(key)
            this.iconDefault.push(key)
        })
        this.defaultMenu.push(...this._routerStore.menu)
        //console.log(this.defaultMenu)
    }

    /**
     * 获取父级菜单
     */
    getParentMenuList() {
        getParentMenu().then(res => {
            this.parentOptions.length = 0
            this.parentOptions.push(...res.data.data)
        })
    }

    /**
     * 监听选择菜单类型变化
     */
    onSelectRadioChange = () => {
        this.information.menuName = ''
    }

    /**
     * 监听选择的上级菜单
     */
    onMenuDialogChange = () => {}

    /**
     * 监听选择icon
     * @param icon
     */
    onClickSelectIcon = (res: string) => {
        this.information.iconInput = res
        this.information.icon = res
        //没有起作用
        document.body.click()
    }

    /**
     * 监听icon 输入框
     */
    onIconInput = (res: string) => {
        this.iconList.length = 0
        if (res !== '') {
            this.iconList.push(...this.iconDefault.filter(item => item.includes(res)))
        } else {
            this.iconList.push(...this.iconDefault)
        }
    }
    //点击确定按钮
    onComfirm = (calback: () => void) => {
        //console.log(this.information)
        /**
         * menuType 1 一级菜单 2 二级菜单 3 按钮
         */

        if (Number(this.information.menuType) !== 3) {
            //1 一级菜单 2 二级菜单
            const obj: menuType = {
                code: this.information.permission,
                name: this.information.name,
                sort: Number(this.information.sort),
                icon: this.information.icon
            }
            //菜单
            if (Number(this.information.menuType) === 2) {
                //菜单 二级菜单
                obj.url = this.information.routerPath //组件路径
                obj.component = this.information.component
            }
            if (this.dialog.type === 'create') {
                obj.parentId = this.information.id
                menuAdd(obj).then(res => {
                    if (res.data.value === 200) {
                        ElMessage.success('新增菜单成功！')
                        this.dialog.visible = false
                        calback()
                    } else {
                        ElMessage.error('新增菜单失败！')
                    }
                })
            } else if (this.dialog.type === 'edit') {
                obj.id = this.information.id
                menuEdit(obj).then(res => {
                    if (res.data.value === 200) {
                        ElMessage.success('菜单修改成功！')
                        this.dialog.visible = false
                        calback()
                    } else {
                        ElMessage.error('菜单修改失败！')
                    }
                })
            }

            //console.log('data', this.information, obj)
        } else {
            //3 按钮
            const obj: MenuPermissionType = {
                code: this.information.permission,
                name: this.information.name,
                url: this.information.api
            }
            if (this.dialog.type === 'create') {
                obj.menuId = this.information.id
                permissionCreate(obj).then(res => {
                    if (res.data.value === 200) {
                        ElMessage.success('新增菜单成功！')
                        this.dialog.visible = false
                        calback()
                    } else {
                        ElMessage.error('新增菜单失败！')
                    }
                })
            } else if (this.dialog.type === 'edit') {
                obj.id = this.information.id
                permissionEdit(obj).then(res => {
                    if (res.data.value === 200) {
                        ElMessage.success('菜单修改成功！')
                        this.dialog.visible = false
                        calback()
                    } else {
                        ElMessage.error('菜单修改失败！')
                    }
                })
            }
        }
    }
}
